import React from 'react'

import CountDown from '../../components/CountDown'

import { Container} from './style'

import { Card, Button, Tag, Divider, Popconfirm, Icon, message } from 'antd'

import moment from 'moment'

import { connect } from 'react-redux'
import {changeTodayPlan} from '../../store/actionCreators'

import Main from '../../request/main'
const request = new Main()

interface Props {
    changeTodayPlan: any,
    history: any
}
interface State{
    todayDate: string
    todayPlanObj: object
    tomorrowDate: string
    tomorrowPlanObj: object
}
class Home extends React.Component<Props, State>{
    readonly state: Readonly<State> = {
        todayDate: '',
        todayPlanObj: {},
        tomorrowDate: '',
        tomorrowPlanObj: {}
    }

    componentDidMount(){
        this.getDate()
    }

    dateFilter(data: string): any {
        return <span style={{ fontSize: 16, color: '#909399'}}>{data.replace(/-/g, '/')}</span>
    }

    getDate() {
        this.setState({
            todayDate: moment().format('YYYY-MM-DD'),
            tomorrowDate: moment().add(1, 'days').format('YYYY-MM-DD')
        }, () => {
            this.getTodayPlan()
            this.getTomorrowPlan()
        })
    }

    handleTimeout(){
        this.getDate()
    }

    getTodayPlan() {
        request.getPlanList({
            date: this.state.todayDate
        }).then(res => {
            if (res.data.content.list.length !== 0) {
                this.setState({
                    todayPlanObj: res.data.content.list[0]
                })
                this.props.changeTodayPlan(res.data.content.list[0])
            } else {
                this.setState({
                    todayPlanObj: {}
                })
            }
        })
    }

    getTomorrowPlan() {
        request.getPlanList({
            date: this.state.tomorrowDate
        }).then(res => {
            if (res.data.content.list.length !== 0) {
                this.setState({
                    tomorrowPlanObj: res.data.content.list[0]
                })
            } else {
                this.setState({
                    tomorrowPlanObj: {}
                })
            }
        })
    }

    sureDonePlan() {
        if (moment().format('YYYY-MM-DD') !== this.state.todayDate) {
            return message.error('骚凹瑞～没有按时完成哦～穷哈！')
        }
        request.updatePlan({
            date: this.state.todayDate
        }).then(res => {
            message.success('恭喜！完成了今日计划！再接再厉呦～')
            this.getTodayPlan()
        })
    }

    render(): any{
        return (
            <Container>
                <div className="left">
                    <Card
                        title={
                            <Button type="link" size="large" icon="rocket">今日计划</Button>
                        }
                        extra={this.dateFilter(this.state.todayDate)}
                    >
                        {
                            Object.keys(this.state.todayPlanObj).length === 0 ?  
                            <Card>
                                暂未制定计划哦～
                            </Card>
                            :
                            <div>
                                <Tag>{(this.state.todayPlanObj as any).title}</Tag>
                                <Divider />
                                <Card>
                                    {(this.state.todayPlanObj as any).content}
                                </Card>
                                <Divider />
                                <div style={{textAlign: 'right'}}>
                                    <Popconfirm
                                        title="真的按计划完成了吗？"
                                        icon={<Icon type="question-circle-o"/>}
                                        okText="完成"
                                        cancelText="骚凹瑞"
                                        disabled={(this.state.todayPlanObj as any).state === '1' ? true : false}
                                        onConfirm={() => this.sureDonePlan()}
                                    >
                                        <Button type="primary" disabled={(this.state.todayPlanObj as any).state === '1' ? true : false} style={(this.state.todayPlanObj as any).state === '1' ? {} : {borderColor: '#67c23a', color: '#67c23a'}} icon="check" ghost>{(this.state.todayPlanObj as any).state === '1' ? '已完成' : '确认完成'}</Button>
                                    </Popconfirm>
                                    <Button type="primary" ghost icon="double-right" disabled={(this.state.todayPlanObj as any).state === '1' ? true : false} onClick={() => this.props.history.push('/add?notEmpty=1')}>转至明日</Button>
                                </div>
                            </div>
                        }
                    </Card>
                    <Card
                        title={<Button type="link" size="large" icon="read">明日计划</Button>}
                        extra={this.dateFilter(this.state.tomorrowDate)}
                    >
                        {
                            Object.keys(this.state.tomorrowPlanObj).length === 0 ?  
                            <Card>
                                暂未制定计划哦～
                            </Card>
                            :
                            <div>
                                <Tag>{(this.state.tomorrowPlanObj as any).title}</Tag>
                                <Divider />
                                <Card>
                                    {(this.state.tomorrowPlanObj as any).content}
                                </Card>
                            </div>
                        }
                    </Card>
                </div>
                <div className="right">
                    <Card>
                        <Button type="danger" size="large" icon="form" ghost onClick={() => this.props.history.push('/add')}>制定计划</Button>
                        <Button type="primary" size="large" icon="profile" ghost onClick={() => this.props.history.push('/history')}>查看历史</Button>
                    </Card>
                    <Card
                        title={<Button type="link" size="large" icon="hourglass">今日倒计时</Button>}
                        extra={<span style={{opacity: 0}}>1</span>}
                    >
                        <div>
                            <CountDown endDate={this.state.tomorrowDate} timeout={() => this.handleTimeout}></CountDown>
                        </div>
                    </Card>
                    <Card
                        title={<Button type="link" size="large" icon="info-circle">温馨提示</Button>}
                        extra={<span style={{ opacity: 0 }}>1</span>}
                    >
                        <div className="tips">
                            <p>契而舍之，朽木不折；</p>
                            <p>契而不舍，金石可偻。</p>
                            <p>当天的计划请务必能<span>当天完成</span>哦。</p>
                            <p>计划一旦制定就<span>不可修改</span>哦，请务必考虑清楚再制定计划哦。</p>
                            <p>建议晚上<span> 22:00 至 23:00 </span>进行今日计划完成进度结算，并制定好明日计划。</p>
                        </div>
                    </Card>
                </div>
            </Container>
        )
    }
}

const mapState = () => ({
})

const mapDispatch = (dispatch: any) => ({
    changeTodayPlan(data: object) {
        dispatch(changeTodayPlan(data))
    },
})

export default connect(mapState, mapDispatch)(Home)